import { HooksDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.useIdle);

## Usage

`use-idle` detects if user does nothing for a given time in ms:

<Demo data={HooksDemos.useIdleDemo} />

## Custom events

By default, the hook will listen to `keypress`, `mousemove`, `touchmove`, `click` and `scroll` events to set idle status.
To change that, provide a list of events in the `options` argument:

<Demo data={HooksDemos.useIdleEvents} />

## Initial state

By default, the hook will return an idle state.
To change that, provide an initial state value in the `options` argument:

<Demo data={HooksDemos.useIdleInitialState} />

### Definition

```tsx
function useIdle(
  timeout: number,
  options?: Partial<{ events: string[]; initialState: boolean }>
): boolean;
```
